import React, { useEffect, useState } from 'react';
import {  Layout, Menu, MenuProps,ConfigProvider, Button,Divider,theme} from 'antd';
import Welcome from './Welcome'
import FunctionMenu from './FunctionMenu'


const { Header } = Layout;

const items1: MenuProps['items'] = ['欢迎', '功能页'].map((key) => ({
  key,
  label: `${key}`,
}));
type ThemeData = {
  borderRadius: number;
  colorPrimary: string;
};

const defaultData: ThemeData = {
  borderRadius: 6,
  colorPrimary: '#4e7c72',
};

const App= (props) => {
  const { darkAlgorithm } = theme;
  const [munuComponent,setmunuComponent]=useState<string>('欢迎')
  const [data, setData] = useState<ThemeData>(defaultData);
  //总体白黑主题控件
  const [ldTheme,setldTheme]=useState<any>('light')

  useEffect(()=>{
    //持久化主题获取
    //大主题黑白
    const TRHEME=localStorage.getItem('ldTheme')
    TRHEME?setldTheme(TRHEME):null
    //小主题
    const littleTRHEME=localStorage.getItem('littleTheme')
    littleTRHEME?setData({...defaultData,colorPrimary:littleTRHEME}):null
  },[])
  return (
    
    <ConfigProvider
    theme={{ token: { colorPrimary: data.colorPrimary, borderRadius: data.borderRadius },algorithm:ldTheme==='light'?null:darkAlgorithm }}
  >
    <Layout style={{height:'100%'}} >
      <Header className="header"  style={{padding:0}}>
        <Menu theme={ldTheme} style={{width:'100%'}}  mode="horizontal" defaultSelectedKeys={['欢迎']} items={items1} onSelect={({ item, key, keyPath, selectedKeys, domEvent })=>{
          setmunuComponent(key)
        }} />
      </Header>
      <Divider  style={{margin:'0'}}/>
      {munuComponent==='欢迎'?<Welcome setldTheme={setldTheme} setData={setData} />:<FunctionMenu ldTheme={ldTheme} />}
    </Layout>
    </ConfigProvider>
  );
};


export default App;